<template>
  <div class="article-item clear" :class="[!data.cover?'no-cover':'']" @click="doArticle">
    <a class="lf cover" v-if="data.cover">
        <img :title="data.title" :src="`${apiBase}/${data.cover}`">
    </a>
    <div class="article-content lf">
        <div class="article-title-des">
            <h5 class="article-title ellipsis">
                <a>{{data.title}}</a>
            </h5>
            <p class="article-des ellipsis-2">{{data.desc}}</p>
        </div>
        <div class="article-infos">
            <p class="article-info">
                <Icon name="mdi:clock-time-nine-outline" />
                <span>{{date.distance(data.update_time)}}</span>
            </p>
            <p class="article-info">
                <Icon name="mdi:eye" />
                <span>{{data.view}}</span>
            </p>
            <p class="article-info">
                <Icon name="fa6-solid:tags" />
                <span>{{data.tags.length}}</span>
            </p>
            <p class="article-info">
                <Icon name="material-symbols:view-list-sharp" />
                <span>{{data.classify.name}}</span>
            </p>
        </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import date from '@/utils/date'
const { public: { apiBase } } = useRuntimeConfig()
interface Props {
    data: {
        id:number,
        title:string,
        cover:string,
        desc:string,
        view:number,
        tags:unknown[],
        classify:unknown,
        update_time:number
    }
}

const props = withDefaults(defineProps<Props>(), {
    data: () => {return {
        id:0,
        title:'',
        cover:'',
        desc:'',
        view:0,
        tags:[],
        classify:{},
        update_time:0
    }}
})
const doArticle = async () => {
    await navigateTo({
        path: '/article',
        query: {
            id: props.data.id
        }
    })
}
</script>

<style lang="less">
    @media screen and (min-width: 1049px) {
        .article-item{
            padding:7.5px;
            height:132px;
            margin-bottom:15px;
            border-radius:6px;
            overflow: hidden;
            background:rgba(255,255,255,.6);
            transition: background .4s;
            &:hover{
                background:#fff;
                .cover>img{
                    opacity:0.8;
                    transform: translate(-10px,0);
                }
            }
            &.no-cover{
                padding:7.5px 15px;
                .article-content{
                    width:100%;
                }
            }
            .cover{
                width:189px;
                height:117px;
                margin-right:15px;
                border-radius:2px;
                overflow: hidden;
                >img{
                    width:199px;
                    height:100%;
                    border-radius:2px; 
                    transform: translate(0);
                    transition: transform .25s,opacity .25s;
                }
            }
            .article-content{
                width:375px;
            }
            .article-title{
                position:relative;
                right:0;
                font-size:14px;
                font-weight:bold;
                line-height:28px;
                margin-bottom:4px;
                transition: right .4s;
                &:hover{
                    right:-10px;
                    text-decoration:underline;
                }
            }
            .article-des{
                height:34px;
                font-size:13px;
            }
            .article-infos{
                margin-top:30px;
                .article-info{
                    width:25%;
                    float:left;
                    svg{
                        margin-right:4px;
                    }
                    >span{
                        font-size:12px;
                    }
                }          
            }
            .article-infos:before,
            .article-infos:after {
                content: "";
                display: table;
            }
            .article-infos:after {
                clear: both;
            }
            .article-infos {
                *zoom: 1;
            }
        }
    }
    @media screen and (max-width: 1050px) {
        .article-item{
            margin-bottom:0.3rem;
            border-radius:0.08rem;
            background:rgba(255,255,255,.6);
            transition: background .4s;
            &:hover{
                background:#fff;
            }
            .cover{
                float:none;
                >img{
                    width:100%;
                    height:2.4rem;
                    object-fit: cover;
                    border-radius:0.08rem 0.08rem 0 0;
                }
            }
            .article-content{
                float:none;
            }
            .article-title-des{
                padding:0.24rem 0.24rem 0.15rem 0.24rem;
                border-bottom: 1px dashed #cfcfcf;
            }
            .article-title{
                font-size:0.32rem;
                font-weight:700;    
                margin-bottom:0.15rem;   
                >a{
                    color:rgba(0, 0, 0, 0.68);
                }
            }
            .article-des{
                line-height:0.56rem;
                color:rgba(0, 0, 0, 0.5);
            }
            .article-infos{
                display:flex;
                justify-content:space-between;
                padding:0.24rem;
                .article-info{
                    color:rgba(0,0,0,0.38);
                    &:last-child{
                        text-align:right;
                    }
                    svg{
                        width:0.3rem;
                        height:0.3rem;
                        margin-right:0.08rem;
                    }
                    >span{
                        font-size:0.24rem;
                    }
                }      
            }
        }
    }
</style>